<!--
 * @Author: your name
 * @Date: 2022-01-31 15:18:29
 * @LastEditTime: 2022-02-19 18:55:05
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue3-ts-food-admin\src\views\home\home.vue
-->
<template>
  <div class="homeContainer">
    <div class="homeSection1st">
      <div class="infoLabel">店铺信息</div>
      <div class="companyGeneralInfo">
        <div class="companyLogo">
          <img :src="state.detail.logoUrl" alt="公司logo" />
        </div>
        <div class="companyDetail">
          <div class="companyBigName">
            {{ state.detail.companyName }}
          </div>
          <div class="companySmallLabel">
            <el-icon class="mr-5"><elicon-phone-filled /></el-icon
            >{{ state.detail.tel }}
          </div>
          <div class="companySmallLabel">
            <el-icon class="mr-5"><elicon-location /></el-icon
            >{{ state.detail.addres }}
          </div>
        </div>
      </div>
    </div>
    <div class="homeSection2nd">
      <div class="homeSalesCont">
        <div class="salesContInnerLeft">
          <div class="salesLabelBig">今日营业额（元）</div>
          <div class="salesLabelSmall">截止5分钟前</div>
        </div>
        <div class="salesContInnerRight">
          {{ state.detail.sales }}
        </div>
      </div>
      <div class="homeOrdersCont">
        <div class="salesContInnerLeft">
          <div class="salesLabelBig">今日有效订单（个）</div>
          <div class="salesLabelSmall">截止5分钟前</div>
        </div>
        <div class="salesContInnerRight">
          {{ state.detail.orders }}
        </div>
      </div>
    </div>
    <div class="homeSection3rd" ref="echartsContainer"></div>
    <div class="homeSection4th">
      <div class="fourThItem">
        <div class="bigValue">{{ state.detail.goodsCegetory }}</div>
        <div class="smallLabel">商品种类</div>
      </div>
      <div class="fourThItem">
        <div class="bigValue">{{ state.detail.goodsNumber }}</div>
        <div class="smallLabel">商品数量</div>
      </div>
      <div class="fourThItem">
        <div class="bigValue">{{ state.detail.memberNumber }}</div>
        <div class="smallLabel">会员数量</div>
      </div>
      <div class="fourThItem">
        <div class="bigValue">{{ state.detail.supplierNumber }}</div>
        <div class="smallLabel">供应商数量</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, Ref } from "vue";
import * as Echarts from "echarts";
import { getCompanyDetail } from "@/api/cloud";

import { CompanyDetail } from "@/types/index";

let resize = () => {};

export default defineComponent({
  setup() {
    const state = reactive<{ detail: CompanyDetail }>({
      detail: {
        tel: 0,
        addres: "",
        logoUrl: "",
        companyName: "",
        orders: 0,
        sales: 0,
        goodsCegetory: 0,
        goodsNumber: 1,
        memberNumber: 2,
        supplierNumber: 3,
      },
    });
    const echartsContainer: Ref<HTMLElement | null> = ref(null);

    return {
      state,
      echartsContainer,
    };
  },

  mounted() {
    getCompanyDetail().then((res) => {
      const { data } = res;
      if (data.code === 200) {
        this.state.detail = data.result;
      }
    });
    if (this.echartsContainer) {
      const chartOption = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      console.log(this.echartsContainer);
      const myChart = Echarts.init(this.echartsContainer);
      myChart.setOption(chartOption);

      resize = () => {
        myChart.resize();
      };
      window.addEventListener("resize", resize);
    }
  },
  unmounted() {
    window.removeEventListener("resize", resize);
  },
});
</script>

<style lang="less" scoped>
.commonCard {
  border: 1px solid #ddd;
}
.homeContainer {
  padding: 30px 38px 10px;
  .homeSection1st {
    margin-bottom: 60px;
    .infoLabel {
      font-size: 20px;
      color: #999;
      margin-bottom: 16px;
    }
    .companyGeneralInfo {
      .commonCard;
      height: 184px;
      display: flex;
      padding-left: 30px;
      align-items: center;
      .companyLogo {
        height: 140px;
        width: 140px;
        border-radius: 70px;
        overflow: hidden;
        box-shadow: 0 0 3px 0.5px #ccc;
        margin-right: 20px;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .companyDetail {
        .companyBigName {
          font-size: 24px;
          color: #101010;
          margin-bottom: 12px;
        }
        .companySmallLabel {
          color: #666;
          font-size: 14px;

          margin-bottom: 12px;
        }
      }
    }
  }
  .homeSection2nd {
    height: 230px;
    margin-bottom: 60px;
    display: flex;
    justify-content: space-between;
    .salesContInnerLeft {
      flex: 1;
      display: flex;
      height: 100%;
      align-content: center;
      flex-wrap: wrap;
    }
    .salesContInnerRight {
      flex: 1;
      display: flex;
      height: 100%;
      align-items: center;
      font-size: 70px;
      color: #ff3131;
    }
    .salesLabelBig {
      font-weight: 600;
      font-size: 24px;
      color: #101010;
      margin-bottom: 30px;
      width: 100%;
    }
    .salesLabelSmall {
      color: #999;
      font-size: 14px;
      width: 100%;
    }
    .homeSalesCont {
      margin-right: 60px;
      flex: 1;
      height: 100%;
      display: flex;
      padding-left: 32px;
      .commonCard;
    }
    .homeOrdersCont {
      flex: 1;
      height: 100%;
      display: flex;
      padding-left: 32px;
      .commonCard;
    }
  }
  .homeSection3rd {
    .commonCard;
    height: 576px;
    margin-bottom: 40px;
  }
  .homeSection4th {
    display: flex;

    height: 230px;
    margin-bottom: 24px;
    .fourThItem {
      display: flex;
      flex: 1;
      border: 1px solid #ddd;
      margin-left: 45px;
      flex-wrap: wrap;
      &:first-child {
        margin-left: 0px;
        .bigValue {
          color: #0eae86;
        }
      }
      &:nth-child(2) {
        .bigValue {
          color: #5756d7;
        }
      }
      &:nth-child(3) {
        .bigValue {
          color: #5ac8fa;
        }
      }
      &:nth-child(4) {
        .bigValue {
          color: #ff9502;
        }
      }
      .bigValue {
        font-size: 60px;
        width: 100%;
        margin-bottom: 28px;
        font-weight: 600;
        justify-content: center;
        display: flex;
        align-items: flex-end;
      }
      .smallLabel {
        font-size: 24px;
        width: 100%;
        color: #333;
        font-weight: 600;
        justify-content: center;
        display: flex;
        align-items: flex-start;
      }
    }
  }
}
</style>
